<template>
	<view class="qdDetal" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :title="title" :isCircle="isApp ? false : true" :isBlur="isApp ? true : false"
			:isSpace="isApp ? true : false" linkId="usr14a3m4dhf2bcc" :isAppBtn="!isApp" :isHome="!isApp"
			:linkData="linkData">
			<template v-if="isApp && hyMsg.auditStatus == 1">
				<view slot="right" class="share fboxRow Ycenter Xcenter" @click="shareTap">
					<text class="bwfont bw-zhuanfa font30"></text>
				</view>
			</template>
		</HeadCustom>
		<view class="" v-if="pageStatus == 'data'">
			<not-login bottom="160rpx" ref="notLogin" />
			<view class="fboxRow Xcenter Ycenter"
				:class="{ zt_shz: hyMsg.auditStatus == 0, zt_wtg: hyMsg.auditStatus == 2 }">
				<text style="padding: 0 10rpx" class="font26 font-ell1">
					{{
						hyMsg.auditStatus == 2
							? '审核未通过：' + hyMsg.auditRemark
							: hyMsg.auditStatus == 0
							? '平台正在审核中...'
							: ''
					}}
				</text>
			</view>
			<view class="img_box">
				<image class="banner_img" :src="hyMsg.themeBanner" mode="aspectFill"
					@click="picPreview(hyMsg.themeBanner, 1)"></image>
			</view>
			<view class="qdMsg_box">
				<view class="qdMsg" style="padding: 0 24rpx 12rpx 24rpx">
					<!-- <view class="title_p font30">{{ hyMsg.themeName }}会议</view> -->
					<u--form :labelWidth="labelWidth" :labelStyle="{ color: '#F7F9FF ' }" labelPosition="left"
						ref="uForm">
						<u-form-item v-for="(item, index) in form" :key="index" labelPosition="left" :label="item.mc"
							class="form-content" v-if="hyMsg[item.type] || item.type == 'time'" :class="{
								isAddres: item.type == 'address' || item.type == 'themeName'
							}">
							<text class="txt_box" v-if="item.type == 'time'">
								{{ hyMsg.gmtStart ? formatDate(hyMsg.gmtStart) : '' }} -
								{{ hyMsg.gmtEnd ? formatDate(hyMsg.gmtEnd) : '' }}
							</text>
							<text v-else @tap="openOther(item)" class="txt_box font-ell2">
								{{ hyMsg[item.type] }}
							</text>
							<text @tap="openOther(item)" v-if="item.icon" :class="item.icon"
								class="bwfont form-icon"></text>
						</u-form-item>
					</u--form>
				</view>
				<view class="qdMsg" style="margin: 24rpx 0 48rpx 0">
					<view>
						<view class="view_item font32" style="margin: 0 0 40rpx 0">会议内容</view>
						<view class="content_detail" v-for="(item, index) in dataTypeList" :key="index">
							<view class="mar10 font32" style="white-space: pre-wrap; line-height: 40rpx"
								v-if="item.type == 'text'" v-html="item.segContent"></view>
							<image class="mar10" v-else-if="item.type == 'image'" :src="item.segContent" mode="widthFix"
								@click="picPreview(item.segContent, 1)"></image>
							<video class="mar10" :show-fullscreen-btn="false" v-else :src="item.segContent"
								:poster="item.mpc_url"></video>
						</view>
					</view>
					<view v-if="hyMsg.gmtApplyStart">
						<view class="view_item font30">报名时间</view>
						<text v-if="hyMsg.gmtApplyStart" class="font28">
							{{ hyMsg.gmtApplyStart ? formatDate(hyMsg.gmtApplyStart) : '' }} -
							{{ hyMsg.gmtApplyEnd ? formatDate(hyMsg.gmtApplyEnd) : '' }}
						</text>
					</view>
					<view>
						<view class="view_item font30">签到时间</view>
						<text v-if="hyMsg.gmtSignStart" class="font28">
							{{ hyMsg.gmtSignStart ? formatDate(hyMsg.gmtSignStart) : '' }} -
							{{ hyMsg.gmtSignEnd ? formatDate(hyMsg.gmtSignEnd) : '' }}
						</text>
					</view>
				</view>

				<!-- <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" v-if="detailType != 'company'">
				<view
					class="btn font32"
					:class="{ color_F4E6CF: item.color == 1, color_363A43: item.color == 2 }"
					v-for="(item, index) in btnArr"
					@tap="openCz(item)"
					:key="index"
					v-if="item.isShow"
				>
					{{ item.name }}
				</view>
			</u-tabbar> -->

				<BottomBtn :backColor="btnColor" :style="{ '--backBtn': btnColor }" v-if="detailType != 'company'">
					<template v-if="btnKey">
						<view class="btn font32" :class="{ color_start: btnStatus[btnKey].color == 1,
							 color_over: btnStatus[btnKey].color == 2 }" @tap="openCz(btnStatus[btnKey])">
							{{ btnStatus[btnKey].name }}
						</view>
					</template>
				</BottomBtn>
			</view>
		</view>

		<view class="fboxCol Ycenter Xcenter zwsj" v-if=" pageStatus == 'noData'">
			<Notempty text="活动不存在"></Notempty>
		</view>
	</view>
</template>

<script>
	import {
		conferenceDetailForOrg,
		conferenceGetByConferenceId,
		conferenceSign
	} from '@/api/h5.js';
	import Notempty from '@/components/not-index/not-empty.vue';
	import {
		judgeIsLogin
	} from '@/static/js/common.js';
	import BottomBtn from '@/components/bottom-btn/fixed.vue';
	import {
		utf8to16,
		base64decode
	} from '@/static/js/Base64.js';
	import {
		getRequest
	} from '@/static/js/common.js';
	// #ifdef H5
	import {
		wxSdk
	} from '@/static/js/wxjsdk.js';
	// #endif
	export default {
		components: {
			BottomBtn,
			Notempty
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				isApp: 0,
				title: '',
				btnKey: '',
				btnStatus: {
					3: {
						name: '立即报名',
						color: 1,
						func: 'RegisterNow',
						id: 3
					},
					4: {
						name: '已报名',
						color: 2,
						id: 4
					},
					5: {
						name: '报名截止',
						color: 2,
						id: 5
					},
					7: {
						name: '立即签到',
						color: 1,
						func: 'signNow',
						id: 7
					},
					8: {
						name: '扫码签到',
						color: 1,
						func: 'sweepNow',
						id: 8
					},
					9: {
						name: '已签到',
						color: 2,
						id: 9
					},
					10: {
						name: '签到截止',
						color: 2,
						id: 10
					},
					11: {
						name: '活动结束',
						color: 2,
						id: 11
					},
					1: {
						name: '活动未开始',
						color: 2,
						id: 1
					},
					6: {
						name: '签到未开始',
						color: 2,
						id: 6
					},
					2: {
						name: '报名未开始',
						color: 2,
						id: 2
					}
				},
				personal: 0,
				form: [{
						mc: '主题',
						type: 'themeName'
					},
					{
						mc: '时间',
						type: 'time'
					},
					{
						mc: '地址',
						type: 'address',
						icon: 'bw-a-lianji14',
						func: 'openMap'
					},
					{
						mc: '联系方式',
						type: 'contact',
						icon: 'bw-dianhua2',
						func: 'goPhone'
					},
					{
						mc: '主办方',
						type: 'sponsors'
					},
					{
						mc: '承办方',
						type: 'organizers'
					}
				],
				detailType: '',
				conferenceId: '', // 会议id
				dataTypeList: [],
				hyMsg: {},
				linkData: {
					id: ''
				},
				isShowLogin: false,
				pageStatus: 'loading',
				btnColor: '',
				labelWidth: 80
			};
		},
		onLoad(option) {
			// 企业点击本无签详情
			if (option && option.type == 'company') {
				this.detailType = option.type;
				if (option.isApp) {
					this.isApp = option.isApp;
					const {
						bw_link
					} = getApp().getBWData(['bw_link']);
					bw_link.isApp = option.isApp;
					uni.setStorageSync('bw_link', JSON.stringify(bw_link));
				}
				// 查询详情
				if (option.conferenceId) {
					this.conferenceId = option.conferenceId;
					this.linkData.id = option.conferenceId;
					this.getDetail();
				} else {
					// 创建时预览详情
					const obj = getApp().globalData.createBwqDetail;
					this.hyMsg = obj;
					console.log('this.hyMsg==============>', Object.values(this.hyMsg));
					this.dataTypeList = this.hyMsg.content;
				}
				this.title = '详情';
			} else if (option && option.conferenceId) {
				// 个人无签详情 或 企业本无签分享地址
				if (option.benwu) {
					let benwu = utf8to16(base64decode(option.benwu));
					const token = {
						statusBarHeight: getRequest(benwu, 'statusBarHeight'),
						access_token: getRequest(benwu, 'token')
					};
					getApp().globalData.statusBarHeight = token.statusBarHeight;
					uni.setStorageSync('bw_params', JSON.stringify(token));
				}
				this.conferenceId = option.conferenceId;
				this.linkData.id = option.conferenceId;
				const {
					bw_link
				} = getApp().getBWData(['bw_link']);
				if (bw_link.isApp) {
					this.isApp = bw_link.isApp;
					this.title = '详情';
				} else {
					uni.setNavigationBarTitle({
						title: `详情`
					});
				}
			}
		},
		onShow() {
			const w = uni.getSystemInfoSync().screenWidth;
			if (w > 780) {
				this.labelWidth = 140;
			} else {
				this.labelWidth = 80;
			}
			if (this.detailType != 'company') {
				this.btnKey = ''
				this.conferenceGetUser();
			}
		},
		watch: {
			globalColor: {
				handler(newVal) {
					if (newVal) {
						this.btnColor = newVal.bottomPopupBackTwoColor;
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			// #ifdef H5
			window.appSweepCallback = this.appSweepCallback;
			// #endif
		},
		methods: {
			// 格式化时间
			formatDate(time) {
				let date = time.split(' ')[0];
				return date.replaceAll('-', '.');
			},
			setShareData(data) {
				const timeObj = {
					title: data.themeName,
					desc: `开始时间:${this.formatDate(data.gmtStart)}\n结束时间:${this.formatDate(
					data.gmtEnd
				)}\n地址:${data.address}`,
					imgUrl: data.themeBanner,
					link: `${location.origin}${location.pathname}#/bwSign/qdDetail?conferenceId=${this.conferenceId}`
				};
				wxSdk.setShareData(timeObj, {});
			},
			// 获取详情数据(个人)
			conferenceGetUser() {
				conferenceGetByConferenceId({
					conferenceId: this.conferenceId
				}).then((res) => {
					if (res.data) {
						this.pageStatus = 'data'
						this.hyMsg = res.data;
						// #ifdef H5
						this.setShareData(res.data);
						// #endif
						this.dataTypeList = JSON.parse(res.data.content);
						this.btnKey = this.hyMsg.memberConferenceStatus
						// 直接签到
						if (this.hyMsg.applySignMode) {
							// 已签到
							if (this.hyMsg.isSign) {
								this.btnKey = 9
								return;
							}
							if (this.hyMsg.conferenceStatus == 1) {
								if (this.hyMsg.signMode == 1) {
									if (!this.isApp) {
										this.btnStatus[this.btnKey].name = '下载app扫码签到';
									}
								} else if (this.hyMsg.signMode == 0) {
									if (this.hyMsg.applySignMode == 2) {
										this.btnStatus[this.btnKey].name = '报名即签到';
									}
								}
							}
							return;
						}
						// 会议状态 未开始-0 进行中-1 已结束-2
						if (this.hyMsg.memberConferenceStatus) {
							if (this.hyMsg.memberConferenceStatus == 8 && !this.isApp) {
								this.btnStatus[this.btnKey].name = '下载app扫码签到'
							}
						}
					}else{
						this.pageStatus = 'noData'
					}
				}).catch(err=>{
					this.pageStatus = 'noData'
				});
			},
			shareTap() {
				const href = window.location.href;
				const data = {
					type: 'share',
					pageType: 'qdDetail',
					themeBanner: this.hyMsg.themeBanner,
					themeName: this.hyMsg.themeName,
					address: this.hyMsg.address,
					conferenceId: this.hyMsg.conferenceId,
					gmtStart: this.hyMsg.gmtStart,
					gmtEnd: this.hyMsg.gmtEnd,
					url: href.substr(0, href.indexOf('?'))
				};
				this.$bridge.callHandler('appHandler', data, (res) => {
					console.log('appHandler', '返回', res);
				});
			},
			// 查看图片
			picPreview(urls, index) {
				uni.previewImage({
					urls: [urls],
					current: index
				});
			},
			// 打开电话界面
			goPhone() {
				if (this.isApp) {
					const data = {
						type: 'callPhone',
						contact: this.hyMsg.contact
					};
					this.$bridge.callHandler('appHandler', data, () => {
						console.log('appHandler', '返回');
					});
				} else {
					uni.makePhoneCall({
						phoneNumber: this.hyMsg.contact,
						success: function(res) {
							console.log(res);
						}
					});
				}
			},
			openOther(item) {
				if (item.func) {
					this[item.func]();
				}
			},
			// 打开地图弹框 选择地图
			openMap() {
				if (this.isApp) {
					const data = {
						type: 'address',
						latitude: this.hyMsg.latitude,
						longitude: this.hyMsg.longitude,
						workAddress: this.hyMsg.address
					};
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回');
					});
				} else {
					const obj = {
						latitude: this.hyMsg.latitude,
						longitude: this.hyMsg.longitude,
						name: this.hyMsg.address
					};
					// 仅在小程序使用这种地图导航
					// #ifdef MP
					uni.openLocation({
						...obj,
						success: function() {
							console.log('成功');
						},
						fail: function() {
							console.log('失败了');
						}
					});
					// #endif
				}
			},
			// 底部按钮操作
			openCz(item) {
				// if (!judgeIsLogin()) {
				// 	this.$nextTick(() => {
				// 		this.$refs.notLogin.openLogin({
				// 			show: true,
				// 			position: 'center'
				// 		});
				// 	});
				// 	return;
				// }
				if (item.func) {
					this[item.func]();
				}
			},
			// 立即报名
			RegisterNow() {
				const data = JSON.parse(this.hyMsg.applyFields);
				getApp().globalData.signMsg = [...data];
				if (this.isApp) {
					this.$pageTo(
						'/bwSign/applyHy?conferenceId=' +
						this.conferenceId +
						'&themeBanner=' +
						this.hyMsg.themeBanner
					);
				} else {
					if (!judgeIsLogin()) {
						this.$nextTick(() => {
							this.$refs.notLogin.openLogin({
								show: true,
								position: 'center'
							});
						});
						return;
					}
					this.$pageTo(
						'/bwSign/applyHy?conferenceId=' +
						this.conferenceId +
						'&themeBanner=' +
						this.hyMsg.themeBanner
					);
				}
			},
			// 立即签到
			signNow() {
				if (this.isApp) {
					this.$pageTo(
						'/bwSign/conferenceSign?conferenceId=' +
						this.conferenceId +
						'&themeName=' +
						this.hyMsg.themeName
					);
				} else {
					if (!judgeIsLogin()) {
						this.$nextTick(() => {
							this.$refs.notLogin.openLogin({
								show: true,
								position: 'center'
							});
						});
						return;
					}
					this.$pageTo(
						'/bwSign/conferenceSign?conferenceId=' +
						this.conferenceId +
						'&themeName=' +
						this.hyMsg.themeName
					);
				}
			},
			appSweepCallback(res) {
				const url = res;
				const conferenceId = url.split('?')[1].split('=')[1];
				if (conferenceId) {
					this.$pageTo('/bwSign/conferenceSign?conferenceId=' + conferenceId);
				}

				// conferenceSign({ conferenceId: conferenceId }).then(res => {
				// 	if (res.data) {
				// 		this.$pageTo('/bwSign/conferenceSign?conferenceId=' + conferenceId + '&themeName=' + this.hyMsg.themeName + '&isShowSubmit=' + true);
				// 	}
				// });
			},
			// 扫码签到
			sweepNow() {
				if (this.isApp) {
					const data = {
						type: 'sweepNow'
					};
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回');
					});
				} else {
					this.$pageTo('/about/guidePage');
				}
			},
			// 获取详情数据(企业)
			getDetail() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				conferenceDetailForOrg({ conferenceId: this.conferenceId }).then((res) => {
					if (res.data) {
						this.pageStatus = 'data'
						this.hyMsg = res.data;
						this.dataTypeList = JSON.parse(res.data.content);
						// #ifdef H5
						this.setShareData(res.data);
						// #endif
					} else {
						this.pageStatus = 'noData'
					}
				})
				.catch(err => {
					this.pageStatus = 'noData'
				})
				.finally(() => {
					uni.hideLoading();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 780px) {
		.banner_img {
			height: 720rpx !important;
		}
	}

	/* #ifdef MP-TOUTIAO */
	::v-deep .u-form-item__body__left {
		width: auto !important;
		min-width: 45px;
	}

	/* #endif */

	.zwsj {
		flex: 1;

		>image {
			width: 290rpx;
			height: 290rpx;
		}

		>text {
			color: var(--contentFontFourColor);
			position: relative;
			top: -60rpx;
		}
	}

	::v-deep .u-form-item__body__left__content__label {
		color: var(--titleFontColor) !important;
		font-size: 28rpx !important;
		font-weight: 600;
		text-align: justify;

		>span {
			width: 100%;
			height: 28rpx;
			margin-right: 10rpx;

			&::after {
				content: '';
				width: 100%;
				display: inline-block;
			}
		}
	}

	::v-deep .u-form-item__body__right__content__slot {
		flex-direction: row;
		align-items: unset;
	}

	::v-deep .isAddres .u-form-item__body__left {
		display: block !important;
		padding-top: 5rpx;
	}

	.content_detail {
		>p {
			font-size: 26rpx;
			color: var(--contentFontDarkColor);
			line-height: 38rpx;
		}

		>image {
			width: 100%;
		}

		>video {
			width: 100%;
		}

		.mar10 {
			margin-bottom: 20rpx;
		}
	}

	.btn {
		width: 100%;
		height: 84rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.color_start {
		background: linear-gradient(360deg,
				var(--rampButtonBackEndColor) 0%,
				var(--rampButtonBackStartColor) 100%);
		color: var(--buttonTextColor);
	}

	// 活动已经结束的/未开始的
	.color_over {
		background: linear-gradient(360deg,
				var(--rampButtonBackEndColor) 0%,
				var(--rampButtonBackStartColor) 100%);
		color: var(--buttonTextColor);
		opacity: 0.5;
	}

	.txt_box {
		font-weight: 400;
		color: var(--contentFontDarkColor);
		line-height: 38rpx;
		flex: 1;
		padding-right: 10rpx;
		font-size: 28rpx;
	}

	.form-icon {
		color: #bf8355;
		font-size: 26rpx;
		margin-top: 6rpx;
	}

	.img_right {
		width: 44rpx;
		height: 44rpx;
		float: right;
	}

	.zt_shz {
		background: rgba(76, 217, 100, 0.1);
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
		height: 76rpx;
		color: #4cd964;
	}

	.zt_wtg {
		background: rgba(255, 85, 51, 0.1);
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
		height: 76rpx;
		color: #fc351f;
	}

	.qdDetal {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.img_box {
			>image {
				width: 100%;
			}
		}

		.qdMsg_box {
			padding: 24rpx;

			.qdMsg {
				background-color: var(--viewBgColor);
				border-radius: 12rpx;
				padding: 24rpx;

				>view {
					.view_item {
						color: var(--titleFontColor);
						margin: 40rpx 0;
						font-weight: 600;
					}

					>text {
						color: var(--contentFontDarkColor);
						line-height: 38rpx;
					}
				}
			}
		}
	}
</style>